<template>
    <section>
        <table>
               <router-link  tag="tr" :to="Item.url"  v-for="(Item,index) in dataList" :key="'cc'+index" class="menu-list":style="index==(dataList.length-1)? 'border-bottom:'+'unset':''">
                   <td> <i><wioc-icon-svg :name="Item.icon"></wioc-icon-svg></i></td>
                   <td>
                       <h3>{{Item.title}}</h3>
                       <h4>{{Item.desc}}</h4>
                   </td>
                   <td>
                       <i><wioc-icon-svg name="icon-banjian"></wioc-icon-svg></i>
                   </td>
               </router-link>
        </table>
    </section>
</template>

<script>
    export default {
        name:'wioc-menu-list',
        data() {
            return {
              /*  dataList:[
                    {
                        icon: 'icon-record',
                        title: '问题上报',
                        desc:'身边问题实时上报',
                        url:'/'
                    }, {
                        icon: 'icon-wanggejianbao2',
                        title: '网格简报',
                        desc:'网格“缩略”信息展示',
                        url:'/'
                    },{
                        icon: 'icon-wentichuzhi3',
                        title: '自发自出',
                        desc:'自主发现自主处理',
                        url:'/'
                    },{
                        icon: 'icon-wentichuzhi3',
                        title: '热线分析',
                        desc:'热线问题多维度处置',
                        icon2:'icon-banjian'
                    },{
                        icon: 'icon-wentichuzhi3',
                        title: '问题处置',
                        desc:'处理上报的问题',
                        url:'/'
                    },{
                        icon: 'icon-wentichuzhi3',
                        title: '自发自出',
                        desc:'查看我上报的案件信息',
                        url:'/'
                    }

                ]*/
            };
        },
        watch:{
        },
        methods:{

        },
        props:{
            dataList:{
                type:Array,
            },
           /* option:{
                type: Object,
                default: () => ({
                    url:'/',
                    params:'id',
                    query:'id',
                    name:'name'
                })
            }*/
        }
    }
</script>

<style  lang="less" scoped>
    table {
        a{
            .menu-list {
                height: 0.56rem;

                border-bottom: 1px solid #EBEDF8;
                // opacity: 0.08;
                &>:nth-child(1){
                    width: 10%;
                    i{
                        icon-svg{

                        }
                    }
                }
                >:nth-child(2){
                    width: 85%;
                    padding-left: 0.08rem;
                    >h3{
                        font-family: PingFangSC-Regular;
                        font-size: 0.14rem;
                        color: #595959;
                        letter-spacing: -0.09px;
                        line-height: 0.2rem;
                        font-weight: normal;
                    }
                    >h4{
                        font-family: PingFangSC-Regular;
                        font-size: 0.12rem;
                        color: #C0C4CC;
                        letter-spacing: -0.08px;
                        line-height: 0.2rem;
                        font-weight: normal;
                    }
                }
                :nth-child(3){
                    width: 5%;
                }
            }
        }

    }

</style>
